<template>
  <a href="javascript:void(0);" class="titleText" :style="{
        backgroundColor:config.bg_color,
      }">
    <div class="title-text-wrap title-text-wrap--left">
      <div class="title-text__link" v-if="config.show_link" @click="jump">
        <span class="mode1" v-if="config.link_type===0">{{config.link_text}}</span>
        <span class="mode2" v-if="config.link_type===1">{{config.link_text}}
          <i class="el-icon-arrow-right"></i>
        </span>
        <span class="mode3" v-if="config.link_type===2">
          <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <div class="title-text__content" :style="{
        textAlign:config.align?'center':'left',
      }">
        <h1 class="title-text__title" 
        :style="{
          color:config.title_color,
          fontSize:config.title_size+'px',
          fontWeight:config.title_weight
        }"
        >{{config.title}}</h1>
        <p class="title-text__sub" :style="{
          fontSize:config.desc_size+'px',
          fontWeight:config.desc_weight,
          color:config.desc_color,
        }">
          <pre class="title-text__desc">{{config.desc}}</pre>
        </p>
      </div>
    </div>
    <el-divider v-if="config.show_divider"></el-divider>
  </a>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
  },
  methods:{
    jump(){
      this.$router.push(this.config.link)
    }
  }
}
</script>

<style lang="less">
.titleText{
  display: block;
  padding: 0 16px;
  text-decoration: none;
  .title-text-wrap {
    position: relative;
    padding: 16px 0;
    word-break: break-all;
    .title-text__desc{
      margin: 0;
    }
  }
  .title-text__sub{
    margin-top: 6px;
  }
  .title-text__title{
    margin: 0;
  }
  .el-divider--horizontal{
    margin: 0;
  }
  .title-text__link{
    display: flex;
    align-items: center;
    float: right;
    margin-left: 24px;
    font-size: 12px;
    line-height: 0;
    white-space: nowrap;
    .mode1{
      color: #38f;
    }
    .mode2,.mode3{
      color: #969799;
    }
  }
}
</style>
